<template>
	<view class="">
		<tn-nav-bar fixed :bottomShadow="false">个人信息</tn-nav-bar>
		<view class="container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 标题 -->
			<view class="page-title">个人信息</view>
			<!-- 表单组件 -->
			<view class="form-wrapper">
				<tn-form :model="form" ref="uForm" label-width="120" labelAlign="center">
					<tn-form-item label="头像">
						<button class="btn-normal" open-type="chooseAvatar" type="balanced"
							@chooseavatar="onChooseAvatar">
							<avatar-image :url="avatarUrl? avatarUrl :'@/static/logo.png'" :width="100" />
						</button>
					</tn-form-item>
					<tn-form-item label="昵称" prop="nickName">
						<tn-input v-model="form.nickName" type="nickname" maxlength="12" placeholder="请输入昵称"
							@input="onInputNickName" @blur="onInputNickName" />
					</tn-form-item>
					<tn-form-item label="手机号" prop="mobile">
						<tn-input v-model="form.mobile"  maxlength="15" placeholder="请输入昵称" />
					</tn-form-item>
				</tn-form>
				
			</view>
			<!-- 操作按钮 -->
			<view class="footer">
				<view class="btn-wrapper">
					<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
				</view>
			</view>
		
		</view>
	</view>

</template>

<script>
	import store from '@/store'
	import AvatarImage from '@/components/avatar-image'
	import * as UserApi from '@/api/user'
	import * as UploadApi from '@/api/upload'
	import Config from '@/core/config'
	import storage from '@/utils/storage'
	// 表单验证规则
	const rules = {
		nickName: [{
			required: true,
			message: '请输入用户昵称',
			trigger: ['blur', 'change']
		}]
	}

	export default {
		components: {
			AvatarImage
		},
		data() {
			return {
				// 按钮禁用
				disabled: false,
				// 头像路径 (用于显示)
				avatarUrl: '',
				// 临时图片 (用于上传)
				tempFile: null,
				// 表单数据
				form: {
					avatarId: '',
					nickName: ''
				},
				// 验证规则
				rules,
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			// 获取当前用户信息
			this.getUserInfo()
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},

		methods: {

			// 获取当前用户信息
			getUserInfo() {
				const app = this
				UserApi.getuserinfo()
					.then(result => {
						const userInfo = result.data.userInfo
						app.form = userInfo
						app.avatarUrl = userInfo.avatar_url
						app.form.avatarId = userInfo.avatarId
						app.form.nickName = userInfo.nick_name
						app.form.mobile = userInfo.mobile
					})
			},
			deleToken() {
				storage.remove('AccessToken')
				storage.remove('AccessToken_expiry')
				storage.remove('userId')
				uni.navigateBack()
			},
			// 点击头像按钮事件
			onClickAvatar() {
				// #ifdef MP-WEIXIN
				return
				// #endif
				this.chooseImage()
			},

			// 选择头像事件 - 仅限微信小程序
			// #ifdef MP-WEIXIN
			onChooseAvatar({
				detail
			}) {
				const token = storage.get('AccessToken')
				const app = this
				/*#ifdef APP-PLUS*/
				const platform = "app"
				/*#endif*/
				/*#ifdef H5*/
				const platform = "H5"
				/*#endif*/
				/*#ifdef MP*/
				const platform = "MP-WEIXIN"
				/*#endif*/
				app.avatarUrl = detail.avatarUrl
				app.tempFile = {
					path: app.avatarUrl
				}
				const apiUrl = Config.get('apiUrl');
				uni.uploadFile({
					url: apiUrl + '/api/upload/image',
					filePath: app.avatarUrl,
					name: 'file',
					data: {
						file: app.avatarUrl
					},
					header: {
						'access-token': token,
						'platform': platform
					},
					success: uploadFileRes => {
						// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);

						this.form.avatarId = data.data.fileInfo.file_id
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});


			},
			// #endif

			// 选择图片
			chooseImage() {
				const app = this
				// 选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success({
						tempFiles
					}) {
						app.tempFile = tempFiles[0]
						app.avatarUrl = app.tempFile.path
					}
				});
			},
			// 上传图片
			uploadFile() {
				const app = this
				return UploadApi.image(app.avatarUrl)
					.then((fileIds) => {
						console.log(fileIds, 21211);
						app.form.avatarId = fileIds[0]
						app.tempFile = null
						return true
					})
					.catch(() => {
						app.disabled = false
						return false
					})
			},

			// 确认修改
			async handleSubmit() {
				const app = this
				// 判断是否重复提交
				if (app.disabled === true) return
				app.$refs.uForm.validate(async valid => {
					if (!valid) return
					// 按钮禁用
					app.disabled = true
					UserApi.editUser({
							form: app.form
						})
						.then(result => {
							app.$toast(result.message)
							setTimeout(() => {
								app.disabled = false
								uni.navigateBack()
							}, 1500)
						}).catch(err => app.disabled = false)

				})
			},

			// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
			onInputNickName(val) {
				if (val) {
					this.form.nickName = val
				}
			}

		}
	}
</script>

<style>
	page {
		background: #f7f8fa;
	}
</style>
<style lang="scss" scoped>
	.container {
		.page-title {
			width: 94%;
			margin: 0 auto;
			padding-top: 40rpx;
			font-size: 28rpx;
			color: rgba(69, 90, 100, 0.6);
		}

		padding: 0 20rpx;

		.form-wrapper {
			background-color: #fff;

			.form-box {
				box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);

				margin-top: 20rpx;
				border-radius: 16rpx;

			}
		}
	}


	/* 底部操作栏 */

	.footer {
		margin-top: 30rpx;
		background: #0ba90b;

		.btn-wrapper {
			height: 100%;
			// display: flex;
			// align-items: center;
			padding: 0 20rpx;
		}

		.btn-item {
			flex: 1;
			font-size: 28rpx;
			height: 86rpx;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-item-wechat {
			background: #0ba90b;
			margin-bottom: 26rpx;
		}

		.btn-item-main {

			// 禁用按钮
			&.disabled {
				opacity: 0.6;
			}
		}

	}
</style>